<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <i class="el-icon-lx-cascades"></i> 接口访问日志
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div class="handle-box">
                <span class="search-title">用户ID：</span>
                <el-input v-model="query.param.userId" placeholder="用户ID" class="handle-input mr10"
                          style="width: 120px"></el-input>
                <span class="search-title">渠道KEY：</span>
                <el-input v-model="query.param.userkey" placeholder="渠道KEY" class="handle-input mr10"
                          style="width: 180px"></el-input>
                <span class="search-title">sessionId：</span>
                <el-input v-model="query.param.sessionId" placeholder="sessionId" class="handle-input mr10"
                          style="width: 180px"></el-input>
                <span class="search-title">请求地址：</span>
                <el-input v-model="query.param.requestUrl" placeholder="请求地址" class="handle-input mr10"
                          style="width: 180px"></el-input>
                <span class="search-title">请求IP：</span>
                <el-input v-model="query.param.requestIp" placeholder="请求IP" class="handle-input mr10"
                          style="width: 120px"></el-input>
                &nbsp;&nbsp;
                <el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
                <br>
                <span class="search-title">请求时间：</span>
                <el-date-picker
                        v-model="query.param.startRequestTime"
                        :picker-options="projectStartDate"
                        type="datetime"
                        value-format="yyyy-MM-dd HH:mm:ss"
                        style="width: 220px;"
                        placeholder="开始日期"
                ></el-date-picker>
                -
                <el-date-picker
                        v-model="query.param.endRequestTime"
                        :picker-options="projectEndDate"
                        type="datetime"
                        value-format="yyyy-MM-dd HH:mm:ss"
                        style="width: 220px;"
                        placeholder="结束日期"
                ></el-date-picker>
            </div>
            <el-table
                    :data="logList"
                    border
                    class="table"
                    ref="multipleTable"
                    header-cell-class-name="table-header"
                    @selection-change="handleSelectionChange"
                    @cell-dblclick="shuangjiCopy">

                <el-table-column type="selection" width="50" align="center" prop="id"></el-table-column>
                <el-table-column prop="id" label="ID" width="90"></el-table-column>
                <el-table-column prop="userkey" label="渠道KEY" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column prop="sessionId" label="sessionId" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column prop="userId" label="用户ID" width="90px"></el-table-column>
                <el-table-column prop="requestUrl" label="请求地址" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column prop="requestMethod" label="方式" width="60px"></el-table-column>
                <el-table-column prop="requestIp" label="请求IP" width="115"></el-table-column>
                <el-table-column prop="requestTime" label="请求时间" width="155"></el-table-column>
                <el-table-column prop="responseTime" label="结束请求时间" width="155"></el-table-column>
                <el-table-column prop="useTime" label="用时" width="60px"></el-table-column>

                <el-table-column label="操作" align="center" width="90">
                    <template slot-scope="scope">
                        <el-button
                                type="text"
                                icon="el-icon-lx-attentionfill"
                                @click="handleDetail(scope.row)"
                        >参数查看
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination
                        background
                        layout="total,sizes, prev, pager, next"
                        :current-page="query.pageNum"
                        :page-sizes="[10,20,50,100]"
                        :page-size="query.pageSize"
                        :total="pageTotal"
                        @current-change="handlePageChange"
                        @size-change="handleSizeChange"
                ></el-pagination>
            </div>
        </div>

        <!-- 编辑弹出框 -->
        <el-dialog title="接口访问详情" :visible.sync="editVisible" width="60%" v-if="detail">
            <strong>ID : </strong>{{detail.id}}<br>
            <strong>渠道KEY : </strong>{{detail.userkey}}<br>
            <strong>SESSIONID : </strong>{{detail.sessionId}}<br>
            <strong>用户ID : </strong>{{detail.userId}}<br>
            <strong>请求地址 : </strong>{{detail.requestUrl}}<br>
            <strong>请求方式 : </strong>{{detail.requestMethod}}<br>
            <strong>请求IP : </strong>{{detail.requestIp}}<br>
            <strong>请求时间 : </strong>{{detail.requestTime}}<br>
            <strong>结束请求时间 : </strong>{{detail.responseTime}}<br>
            <strong>请求用时 : </strong>{{detail.useTime}}<br><br>
            <strong v-if="detail.requestHeadParam">请求header参数 : </strong>
            <json-viewer v-if="detail.requestHeadParam" :value="JSON.parse(detail.requestHeadParam)" :expand-depth=4
                         copyable sort></json-viewer>
            <strong v-if="detail.requestFormParam">请求表单参数 : </strong>
            <json-viewer v-if="detail.requestFormParam" :value="JSON.parse(detail.requestFormParam)" :expand-depth=4
                         copyable sort></json-viewer>
            <strong v-if="detail.requestIoParam">请求流（json/xml...）参数 : </strong>
            <json-viewer v-if="detail.requestIoParam" :value="JSON.parse(detail.requestIoParam)" :expand-depth=4
                         copyable sort></json-viewer>
            <strong v-if="detail.responseParam">发返回响应参数 : </strong>
            <json-viewer v-if="detail.responseParam" :value="JSON.parse(detail.responseParam)" :expand-depth=4 copyable
                         sort></json-viewer>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        name: 'logList',
        data() {
            return {
                query: {
                    pageNum: 1,
                    pageSize: 10,
                    param: {
                        userId: '',
                        userkey: '',
                        sessionId: '',
                        requestUrl: '',
                        requestIp: '',
                        startRequestTime: '',
                        endRequestTime: ''
                    }
                },
                logList: [],
                multipleSelection: [],
                delList: [],
                editVisible: false,
                pageTotal: 0,
                projectStartDate: this.beginDate(),
                projectEndDate: this.processDate(),
                detail: {}
            };
        },
        created() {
            this.getData();
        },
        methods: {
            // 获取 easy-mock 的模拟数据
            getData() {
                var index = layer.load(0, { shade: [0.5,'#fff'] });
                logsRequestAllList(this.query).then(res => {
                    layer.close(index);
                    if (res.returnCode == 200) {
                        this.logList = res.data.list;
                        this.pageTotal = res.data.total;
                    } else {
                        this.logList = null;
                        this.pageTotal = 0;
                    }
                });
            },
            // 触发搜索按钮
            handleSearch() {
                this.$set(this.query, 'pageNum', 1);
                this.getData();
            },
            // 多选操作
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            handleDetail(row) {
                var index = layer.load(0, { shade: [0.5,'#fff'] });
                logsRequestAllDetail(row.id).then(res => {
                    layer.close(index);
                    if (res.returnCode == 200) {
                        this.detail = res.data;
                        this.editVisible = true;
                    } else {
                        this.$alert('获取详情失败了', '提示');
                    }
                });
            },
            // 分页导航
            handlePageChange(val) {
                this.$set(this.query, 'pageNum', val);
                this.getData();
            },
            handleSizeChange(val) {
                this.$set(this.query, 'pageSize', val);
                this.getData();
            },
            shuangjiCopy(row, column) {
                this.$copyText(row[column.property]).then(
                    res => {

                    },
                    err => {

                    }
                );
            },
            // 日期选择约束
            beginDate() {
                const self = this;
                return {
                    disabledDate(time) {
                        if (self.query.param.endRequestTime) {
                            //如果结束时间不为空，则小于结束时间
                            return (
                                new Date(self.query.param.endRequestTime).getTime() < time.getTime()
                            );
                        } else {
                            // return time.getTime() > Date.now()//开始时间不选时，结束时间最大值小于等于当天
                        }
                    }
                };
            },
            processDate() {
                const self = this;
                return {
                    disabledDate(time) {
                        if (self.query.param.startRequestTime) {
                            //如果开始时间不为空，则结束时间大于开始时间
                            return (
                                new Date(self.query.param.startRequestTime).getTime() > time.getTime()
                            );
                        } else {
                            // return time.getTime() > Date.now()//开始时间不选时，结束时间最大值小于等于当天
                        }
                    }
                };
            }
        }
    };
</script>

<style scoped>
    .handle-box {
        margin-bottom: 20px;
    }

    .handle-select {
        width: 120px;
    }

    .handle-input {
        width: 300px;
        display: inline-block;
    }

    .table {
        width: 100%;
        font-size: 14px;
    }

    .mr10 {
        margin-right: 10px;
        padding: 5px 0px;
    }

    .search-title {
        font-size: 14px;
    }

    .title-lable {
        font-size: 14px;
    }

</style>